<template>
  <div class="report-container">
    <!--pages/result/index.wxml-->
    <view class="report-main">
      <view class="tzTitle text-2xl m-4 lg:m-8">检测信息</view>
      <view class="tezheng m-4 lg:m-8">
        <view class="category p-4 lg:px-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl"
              >姓名：{{ pInfo.name }}</text
            >
          </view>
        </view>
        <view class="category px-4 py-2 lg:px-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl"
              >年龄：{{ pInfo.age }}</text
            >
          </view>
        </view>
        <view class="category p-4 lg:px-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl"
              >性别：{{ ["", "男", "女"][pInfo.sex] }}</text
            >
          </view>
        </view>
      </view>

      <view class="title mx-4 lg:mx-8">
        <text class="title1 text-2xl ">AI诊断结果</text>
        <!-- 显示空格 -->
        <text class="title2 text-2xl " :decode="true" :space="true"
          >&nbsp;(柱状图显示对应的推荐)</text
        >
      </view>
      <view class="tizhiBJP mx-4 h-28 lg:h-40 lg:mx-8">
        <view class="leftIcon mx-4 lg:mx-8">
          <!-- <img class="Icon" :src="recommendIcon"> -->
          <img class="Icon w-20 h-20 lg:w-32 lg:h-32" :src="tongueUrl" />
        </view>
        <view class="rightRes">
          <view class="text-base lg:text-2xl"
            >您的体质：{{ tzResName }}体质</view
          >
          <!-- <view>保健品：{{baojianpin}}</view> -->
        </view>
      </view>
      <!-- 体质柱形图 -->
      <view class="tizhiBar mx-4 h-32 lg:h-44 lg:mx-8">
        <view class="pinghe">
          <canvas
            id="pinghe"
            canvas-id="pinghe"
            class="phBar"
            :width="canvasW"
          ></canvas>
          <view class="pingheText">平和</view>
          <view class="sanjiao" v-if="!isnotPinghe"></view>
        </view>
        <view class="qixu">
          <canvas
            id="qixu"
            canvas-id="qixu"
            class="qxBar"
            :width="canvasW"
          ></canvas>
          <view class="qixuText">气虚</view>
          <view class="sanjiao" v-if="!isnotQixu"></view>
        </view>
        <view class="yangxu">
          <canvas
            id="yangxu"
            canvas-id="yangxu"
            class="yangxuBar"
            :width="canvasW"
          ></canvas>
          <view class="yangxuText">阳虚</view>
          <view class="sanjiao" v-if="!isnotYangxu"></view>
        </view>

        <view class="yinxu">
          <canvas
            id="yinxu"
            canvas-id="yinxu"
            class="yinxuBar"
            :width="canvasW"
          ></canvas>
          <view class="yinxuText">阴虚</view>
          <view class="sanjiao" v-if="!isnotYinxu"></view>
        </view>
        <view class="shire">
          <canvas
            id="shire"
            canvas-id="shire"
            class="shireBar"
            :width="canvasW"
          ></canvas>
          <view class="shireText">湿热</view>
          <view class="sanjiao" v-if="!isnotShire"></view>
        </view>
        <view class="tanshi">
          <canvas
            id="tanshi"
            canvas-id="tanshi"
            class="tanshiBar"
            :width="canvasW"
          ></canvas>
          <view class="tanshiText">痰湿</view>
          <view class="sanjiao" v-if="!isnotTanshi"></view>
        </view>
        <view class="xueyu">
          <canvas
            id="xueyu"
            canvas-id="xueyu"
            class="xueyuBar"
            :width="canvasW"
          ></canvas>
          <view class="xueyuText">血瘀</view>
          <view class="sanjiao" v-if="!isnotXueyu"></view>
        </view>
        <view class="qiyu">
          <canvas
            id="qiyu"
            canvas-id="qiyu"
            class="qiyuBar"
            :width="canvasW"
          ></canvas>
          <view class="qiyuText">气郁</view>
          <view class="sanjiao" v-if="!isnotQiyu"></view>
        </view>
        <view class="tebing">
          <canvas
            id="tebing"
            canvas-id="tebing"
            class="tebingBar"
            :width="canvasW"
          ></canvas>
          <view class="tebingText">特禀</view>
          <view class="sanjiao" v-if="!isnotTebing"></view>
        </view>
      </view>
      <view class="tiaoli mt-12 mx-4 lg:mx-8">
        <view class="biaoxian m-4 text-base lg:text-xl lg:m-8">
          <text class="bxTitle text-base lg:text-xl">常见表现：</text>
          <text class="bxDetail text-base lg:text-xl">{{ biaoxian }}</text>
        </view>
      </view>
      <!-- 舌象特征 -->
      <view class="tzTitle text-2xl m-4 lg:m-8">舌象特征分析</view>
      <view class="tezheng m-4 lg:m-8">
        <!-- 舌色 -->
        <view class="category p-4 lg:p-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl">舌色</text>
          </view>

          <view class="sheseRange mt-6 lg:mt-12">
            <view class="ssView">
              <view class="danbai">
                <view class="thisResOut" v-if="!isnotDanbai">
                  <view class="thisResIn" v-if="!isnotDanbai"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">淡白</text>
            </view>
            <view class="ssView">
              <view class="danhong">
                <view class="thisResOut" v-if="!isnotDanhong">
                  <view class="thisResIn" v-if="!isnotDanhong"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">淡红</text>
            </view>
            <view class="ssView">
              <view class="hong">
                <view class="thisResOut" v-if="!isnotHong">
                  <view class="thisResIn" v-if="!isnotHong"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">红</text>
            </view>
            <view class="ssView">
              <view class="jiang">
                <view class="thisResOut" v-if="!isnotJiang">
                  <view class="thisResIn" v-if="!isnotJiang"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">绛</text>
            </view>
            <view class="ssView">
              <view class="zi">
                <view class="thisResOut" v-if="!isnotZi">
                  <view class="thisResIn" v-if="!isnotZi"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">紫</text>
            </view>
          </view>
          <view class="thisTezhengRes text-base lg:text-xl">
            <text class="ResText text-base lg:text-xl">{{ sheseText }}：</text>
            <text class="ResDetail text-base lg:text-xl">{{
              sheseDetail
            }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <!-- 舌形 -->
        <view class="category p-4 lg:p-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl">舌形</text>
          </view>
          <!-- 舌形特征滑动视图 -->
          <scroll-view scroll-x="true">
            <view class="shexingRange">
              <view
                v-if="isChihen"
                class="isThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">齿痕舌</text>
              </view>
              <view v-else class="notThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">齿痕舌</text>
              </view>

              <view
                v-if="isDianci"
                class="isThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">点刺舌</text>
              </view>
              <view v-else class="notThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">点刺舌</text>
              </view>

              <view
                v-if="isLiewen"
                class="isThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">裂纹舌</text>
              </view>
              <view v-else class="notThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">裂纹舌</text>
              </view>

              <view
                v-if="isShoubao"
                class="isThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">瘦薄舌</text>
              </view>
              <view v-else class="notThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">瘦薄舌</text>
              </view>

              <view
                v-if="isPangda"
                class="isThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">胖大舌</text>
              </view>
              <view v-else class="notThisSX w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">胖大舌</text>
              </view>
            </view>
          </scroll-view>
          <view
            v-for="(item, index) in sxResList"
            :key="index"
            class="thisTezhengRes text-base lg:text-xl"
          >
            <text class="ResText text-base lg:text-xl"
              >{{ item["Text"] }}：</text
            >
            <text class="ResDetail text-base lg:text-xl">{{
              item["Detail"]
            }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <!-- 苔色 -->
        <view class="category p-4">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl">苔色</text>
          </view>
          <view class="taiseRange mt-6 lg:mt-12">
            <view class="tsView">
              <view class="qianbai">
                <view class="thisResOut" v-if="!isnotQianbai">
                  <view class="thisResIn" v-if="!isnotQianbai"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">浅白苔</text>
            </view>
            <view class="tsView">
              <view class="shenbai">
                <view class="thisResOut" v-if="!isnotShenbai">
                  <view class="thisResIn" v-if="!isnotShenbai"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">深白苔</text>
            </view>
            <view class="tsView">
              <view class="qianhuang">
                <view class="thisResOut" v-if="!isnotQianhuang">
                  <view class="thisResIn" v-if="!isnotQianhuang"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">浅黄苔</text>
            </view>
            <view class="tsView">
              <view class="shenhuang">
                <view class="thisResOut" v-if="!isnotShenhuang">
                  <view class="thisResIn" v-if="!isnotShenhuang"></view>
                </view>
              </view>
              <text class="text-base lg:text-xl">深黄苔</text>
            </view>
          </view>
          <view class="thisTezhengRes text-base lg:text-xl">
            <text class="ResText text-base lg:text-xl">{{ taiseText }}：</text>
            <text class="ResDetail text-base lg:text-xl">{{
              taiseDetail
            }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <!-- 苔质 -->
        <view class="category p-4 lg:p-8">
          <view class="categoryName">
            <view class="point"></view>
            <text class="categoryText text-xl lg:text-2xl">苔质</text>
          </view>
          <!-- 苔质特征滑动视图 -->
          <scroll-view scroll-x="true">
            <view class="taizhiRange">
              <view
                v-if="isBaotai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">薄苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">薄苔</text>
              </view>

              <view
                v-if="isHoutai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">厚苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">厚苔</text>
              </view>

              <view
                v-if="isNitai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">腻苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">腻苔</text>
              </view>

              <view
                v-if="isFutai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">腐苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">腐苔</text>
              </view>

              <view
                v-if="isRuntai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">润苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">润苔</text>
              </view>

              <view
                v-if="isZaotai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">燥苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">燥苔</text>
              </view>

              <view
                v-if="isHuatai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">滑苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">滑苔</text>
              </view>

              <view
                v-if="isBotai"
                class="isThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2"
              >
                <text class="text-base lg:text-xl">剥苔</text>
              </view>
              <view v-else class="notThisTZ w-20 h-8 lg:w-24 lg:h-10 mr-2">
                <text class="text-base lg:text-xl">剥苔</text>
              </view>
            </view>
          </scroll-view>
          <view
            v-for="(item, index) in tzResList"
            :key="index"
            class="thisTezhengRes text-base lg:text-xl"
          >
            <text class="ResText text-base lg:text-xl"
              >{{ item["Text"] }}：</text
            >
            <text class="ResDetail text-base lg:text-xl">{{
              item["Detail"]
            }}</text>
          </view>
        </view>
      </view>

      <!-- 调理方案 -->
      <view class="tzTitle text-2xl m-4 lg:m-8">调理方案</view>
      <view class="tiaoli mt-8 mx-4 lg:mx-8">
        <view class="yundong m-4 text-base lg:text-xl lg:m-8">
          <text class="yundongTitle text-base lg:text-xl">体育锻炼：</text>
          <text class="yundongDetail text-base lg:text-xl">{{
            yundongDetail
          }}</text>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <view class="yundong m-4 text-base lg:text-xl lg:m-8">
          <text class="yundongTitle text-base lg:text-xl">经络保健：</text>
          <text class="yundongDetail text-base lg:text-xl">{{
            jingluoDetail
          }}</text>
        </view>
        <view class="jingluoImages">
          <view
            class="jingluoImage"
            v-for="(item, index) in jingluoImages"
            :key="index"
          >
            <img
              :src="item.picture"
              class="w-[55vw] h-[55vw] lg:w-[24vw] lg:h-[24vw]"
            />
            <text class="text-xl lg:text-2xl">{{ item.name }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <!-- 宜吃 -->
        <view class="yichi m-4 text-base lg:text-xl lg:m-8">
          <text class="ycText text-base lg:text-xl">宜吃：</text>
          <text class="ycDetail text-base lg:text-xl">{{ yichi }}</text>
        </view>
        <view class="ycImages m-4 lg:m-8 text-base lg:text-xl justify-evenly">
          <view class="ycImage" v-for="(item, index) in ycImages" :key="index">
            <img
              :src="item.picture"
              class="w-[30vw] h-[30vw] lg:w-[12vw] lg:h-[12vw]"
            />
            <text class="text-xl lg:text-2xl">{{ item.name }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="splitLine mx-4 lg:mx-8"></view>
        <!-- 慎吃 -->
        <view class="shenchi m-4 text-base lg:text-xl lg:m-8">
          <text class="scText text-base lg:text-xl">慎吃：</text>
          <text class="scDetail text-base lg:text-xl">{{ shenchi }}</text>
        </view>
        <view class="scImages lg:justify-center justify-evenly">
          <view
            class="scImage lg:mx-8"
            v-for="(item, index) in scImages"
            :key="index"
          >
            <img
              :src="item.picture"
              class="w-[30vw] h-[30vw] lg:w-[12vw] lg:h-[12vw]"
            />
            <text class="text-xl lg:text-2xl">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
// import TestData from './test.js'
let TestData = "";
export default {
  data() {
    return {
      sheseText: "",
      sheseDetail: "",

      isnotDanbai: true, //舌色
      isnotDanhong: true,
      isnotHong: true,
      isnotJiang: true,
      isnotZi: true,

      isChihen: false, //舌形
      isDianci: false,
      isLiewen: false,
      isShoubao: false,
      isPangda: false,
      sxResList: [],

      taiseText: "",
      taiseDetail: "",

      isnotQianbai: true, //苔色
      isnotShenbai: true,
      isnotQianhuang: true,
      isnotShenhuang: true,

      isBaotai: false, //苔质
      isHoutai: false,
      isNitai: false,
      isFutai: false,
      isRuntai: false,
      isZaotai: false,
      isHuatai: false,
      isBotai: false,
      tzResList: [],

      isnotPinghe: true, //三角形是否隐藏
      isnotQixu: true,
      isnotYangxu: true,
      isnotYinxu: true,
      isnotShire: true,
      isnotTanshi: true,
      isnotXueyu: true,
      isnotQiyu: true,
      isnotTebing: true,

      tzResName: "",
      tongueUrl: "",
      // baojianpin:"海参百合羹",
      biaoxian: "",
      yundongDetail: "",
      jingluoDetail: "",
      jingluoImages: [],
      yichi: "",
      shenchi: "",
      scImages: [],
      canvasW: 60,
      pInfo: {},
    };
  },
  methods: {
    processResult: function () {
      var res = TestData;
      if (res.tizhiType) {
        var sheseHidden = {
          淡白舌: true,
          淡红舌: true,
          红舌: true,
          绛舌: true,
          紫舌: true,
        };
        sheseHidden[res.tezheng.shese.name] = false;

        var sxResList = [];
        if (res.tezheng.shexing.chihen.flag) {
          sxResList.push({
            Text: "齿痕舌",
            Detail: res.tezheng.shexing.chihen.detail,
          });
        }
        if (res.tezheng.shexing.dianci.flag) {
          sxResList.push({
            Text: "点刺舌",
            Detail: res.tezheng.shexing.dianci.detail,
          });
        }
        if (res.tezheng.shexing.liewen.flag) {
          sxResList.push({
            Text: "裂纹舌",
            Detail: res.tezheng.shexing.liewen.detail,
          });
        }
        if (res.tezheng.shexing.shoubao.flag) {
          sxResList.push({
            Text: "瘦薄舌",
            Detail: res.tezheng.shexing.shoubao.detail,
          });
        }
        if (res.tezheng.shexing.pangda.flag) {
          sxResList.push({
            Text: "胖大舌",
            Detail: res.tezheng.shexing.pangda.detail,
          });
        }

        var taiseHidden = {
          浅白苔: true,
          深白苔: true,
          浅黄苔: true,
          深黄苔: true,
        };
        taiseHidden[res.tezheng.taise.name] = false;

        var tzResList = [];
        if (res.tezheng.taizhi.baotai.flag) {
          tzResList.push({
            Text: "薄苔",
            Detail: res.tezheng.taizhi.baotai.detail,
          });
        }
        if (res.tezheng.taizhi.houtai.flag) {
          tzResList.push({
            Text: "厚苔",
            Detail: res.tezheng.taizhi.houtai.detail,
          });
        }
        if (res.tezheng.taizhi.nitai.flag) {
          tzResList.push({
            Text: "腻苔",
            Detail: res.tezheng.taizhi.nitai.detail,
          });
        }
        if (res.tezheng.taizhi.futai.flag) {
          tzResList.push({
            Text: "腐苔",
            Detail: res.tezheng.taizhi.futai.detail,
          });
        }
        if (res.tezheng.taizhi.runtai.flag) {
          tzResList.push({
            Text: "润苔",
            Detail: res.tezheng.taizhi.runtai.detail,
          });
        }
        if (res.tezheng.taizhi.zaotai.flag) {
          tzResList.push({
            Text: "燥苔",
            Detail: res.tezheng.taizhi.zaotai.detail,
          });
        }
        if (res.tezheng.taizhi.huatai.flag) {
          tzResList.push({
            Text: "滑苔",
            Detail: res.tezheng.taizhi.huatai.detail,
          });
        }
        if (res.tezheng.taizhi.botai.flag) {
          tzResList.push({
            Text: "剥苔",
            Detail: res.tezheng.taizhi.botai.detail,
          });
        }

        // 体质
        var tizhiHidden = {
          平和: true,
          气虚: true,
          阳虚: true,
          阴虚: true,
          湿热: true,
          痰湿: true,
          血瘀: true,
          气郁: true,
          特禀: true,
        };
        tizhiHidden[res.tizhiType] = false;
        this.tzResList = tzResList;
        console.log(tzResList);
        this.setData({
          sheseText: res.tezheng.shese.name,
          sheseDetail: res.tezheng.shese.detail,

          isnotDanbai: sheseHidden["淡白舌"], //舌色
          isnotDanhong: sheseHidden["淡红舌"],
          isnotHong: sheseHidden["红舌"],
          isnotJiang: sheseHidden["绛舌"],
          isnotZi: sheseHidden["紫舌"],

          isChihen: res.tezheng.shexing.chihen.flag, //舌形
          isDianci: res.tezheng.shexing.dianci.flag,
          isLiewen: res.tezheng.shexing.liewen.flag,
          isShoubao: res.tezheng.shexing.shoubao.flag,
          isPangda: res.tezheng.shexing.pangda.flag,
          sxResList: sxResList,

          taiseText: res.tezheng.taise.name,
          taiseDetail: res.tezheng.taise.detail,

          isnotQianbai: taiseHidden["浅白苔"], //苔色
          isnotShenbai: taiseHidden["深白苔"],
          isnotQianhuang: taiseHidden["浅黄苔"],
          isnotShenhuang: taiseHidden["深黄苔"],

          isBaotai: res.tezheng.taizhi.baotai.flag, //苔质
          isHoutai: res.tezheng.taizhi.houtai.flag,
          isNitai: res.tezheng.taizhi.nitai.flag,
          isFutai: res.tezheng.taizhi.futai.flag,
          isRuntai: res.tezheng.taizhi.runtai.flag,
          isZaotai: res.tezheng.taizhi.zaotai.flag,
          isHuatai: res.tezheng.taizhi.huatai.flag,
          isBotai: res.tezheng.taizhi.botai.flag,

          isnotPinghe: tizhiHidden["平和"], //三角形是否隐藏
          isnotQixu: tizhiHidden["气虚"],
          isnotYangxu: tizhiHidden["阳虚"],
          isnotYinxu: tizhiHidden["阴虚"],
          isnotShire: tizhiHidden["湿热"],
          isnotTanshi: tizhiHidden["痰湿"],
          isnotXueyu: tizhiHidden["血瘀"],
          isnotQiyu: tizhiHidden["气郁"],
          isnotTebing: tizhiHidden["特禀"],

          tzResName: res.tizhiType,
          tongueUrl: res.cropTongue,

          biaoxian: res.tiaoli.changjianbiaoxian,
          yundongDetail: res.tiaoli.tiyuduanlian,
          jingluoDetail: res.tiaoli.jingluobaojian,
          jingluoImages: res.tiaoli.jingluoPic,

          yichi: res.tiaoli.yishiliao,
          ycImages: res.tiaoli.yichiPic,
          shenchi: res.tiaoli.buyichi,
          scImages: res.tiaoli.buyichiPic,
        });
      }
    },
    setData(obj) {
      for (let i of Object.keys(obj)) {
        this[i] = obj[i];
      }
    },
    drawTizhiDistribution: function () {
      const wx = {
        createCanvasContext(id) {
          let c = document.getElementById(id);
          var ctx = c.getContext("2d");
          ctx.__proto__.setFillStyle = function (color) {
            this.fillStyle = color;
          };
          ctx.__proto__.draw = function () {};
          return ctx;
        },
      };
      var res = TestData;
      // 最大体质更换颜色
      var tizhiColor = {
        平和: "#FFF6DE",
        气虚: "#FFF6DE",
        阳虚: "#FFF6DE",
        阴虚: "#FFF6DE",
        湿热: "#FFF6DE",
        痰湿: "#FFF6DE",
        血瘀: "#FFF6DE",
        气郁: "#FFF6DE",
        特禀: "#FFF6DE",
      };
      tizhiColor[res.tizhiType] = "#F7BE51";

      // 绘制体质概率分布
      var tizhiDistribution = res.tizhiDistribution;
      // var c = document.getElementById("pinghe");
      // var ctx = c.getContext("2d");
      const ctx = wx.createCanvasContext("pinghe");
      console.log(ctx);
      ctx.fillStyle = tizhiColor["平和"];
      var pinghe = tizhiDistribution["pinghe"] * 100;
      ctx.fillRect(5, 110 - pinghe, 20, pinghe);
      // ctx.draw()

      const ctx2 = wx.createCanvasContext("qixu");
      console.log(ctx2);
      ctx2.setFillStyle(tizhiColor["气虚"]);
      var qixu = tizhiDistribution["qixu"] * 100;
      console.log(ctx2);
      ctx2.fillRect(5, 110 - qixu, 20, qixu);
      ctx2.draw();
      // return
      const ctx3 = wx.createCanvasContext("yangxu");
      ctx3.setFillStyle(tizhiColor["阳虚"]);
      var yangxu = tizhiDistribution["yangxu"] * 100;
      ctx3.fillRect(5, 110 - yangxu, 20, yangxu);
      ctx3.draw();

      const ctx4 = wx.createCanvasContext("yinxu");
      ctx4.setFillStyle(tizhiColor["阴虚"]);
      var yinxu = tizhiDistribution["yinxu"] * 100;
      ctx4.fillRect(5, 110 - yinxu, 20, yinxu);
      ctx4.draw();

      const ctx5 = wx.createCanvasContext("shire");
      ctx5.setFillStyle(tizhiColor["湿热"]);
      var shire = tizhiDistribution["shire"] * 100;
      ctx5.fillRect(5, 110 - shire, 20, shire);
      ctx5.draw();

      const ctx6 = wx.createCanvasContext("tanshi");
      ctx6.setFillStyle(tizhiColor["痰湿"]);
      var tanshi = tizhiDistribution["tanshi"] * 100;
      ctx6.fillRect(5, 110 - tanshi, 20, tanshi);
      ctx6.draw();

      const ctx7 = wx.createCanvasContext("xueyu");
      ctx7.setFillStyle(tizhiColor["血瘀"]);
      var xueyu = tizhiDistribution["xueyu"] * 100;
      ctx7.fillRect(5, 110 - xueyu, 20, xueyu);
      ctx7.draw();

      const ctx8 = wx.createCanvasContext("qiyu");
      ctx8.setFillStyle(tizhiColor["气郁"]);
      var qiyu = tizhiDistribution["qiyu"] * 100;
      ctx8.fillRect(5, 110 - qiyu, 20, qiyu);
      ctx8.draw();

      const ctx9 = wx.createCanvasContext("tebing");
      ctx9.setFillStyle(tizhiColor["特禀"]);
      var tebing = tizhiDistribution["tebing"] * 100;
      ctx9.fillRect(5, 110 - tebing, 20, tebing);
      ctx9.draw();
    },
  },
  mounted() {
    var that = this;
    let fromHistory = window.localStorage.getItem("fromHistory");
    let pInfo = {};
    if (fromHistory) {
      pInfo = JSON.parse(window.localStorage.getItem("tongue_p_info"));
    } else {
      pInfo = JSON.parse(window.localStorage.getItem("patientInfo"));
    }
    this.pInfo = pInfo;
    TestData = JSON.parse(window.localStorage.getItem("tongue_res"));
    that.processResult();
    that.drawTizhiDistribution();
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
scroll-view {
  display: block;
  overflow-x: auto;
  width: 100%;
}
.report-container {
  display: flex;
  justify-content: center;
  background: gray;
  width: 100vw;
}
.report-main {
  width: 100vw;
  background: #13c297;
}
view {
  display: block;
  flex-shrink: 0;
}
text {
  display: inline;
}
/* pages/result/index.wxss */

/* 舌象特征 */
.tzTitle {
  display: flex;
  margin: 40px 0 20px 40px;
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
}
/* 特征具体画布 */
.tezheng {
  background-color: white;
  margin: 20px;
  border-radius: 10px;
  height: max-content;
}
.category {
  height: 100%;
  padding: 40px;
}
.categoryName {
  display: flex;
  flex-direction: row;
}
.categoryText {
  font-size: 32px;
  font-weight: bold;
  margin: auto 16px;
}
.point {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #13c297;
  margin: auto 0;
}
/* 外圆 */
.thisResOut {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #13c297;
  margin: -5px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 内圆 */
.thisResIn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}
/* 舌色颜色条 */
.sheseRange {
  margin: 60px 0 20px 0;
  display: flex;
  justify-content: center;
}
.ssView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.ssView text {
  font-size: 26px;
  color: #989898;
  margin: 16px 0;
}
.sheseRange .danbai {
  height: 10px;
  width: 100%;
  background-color: #eff3f4;
}

.sheseRange .danhong {
  height: 10px;
  width: 100%;
  background-color: #fecbca;
}
.sheseRange .hong {
  height: 10px;
  width: 100%;
  background-color: #fe6869;
}
.sheseRange .jiang {
  height: 10px;
  width: 100%;
  background-color: #da0203;
}
.sheseRange .zi {
  height: 10px;
  width: 100%;
  background-color: #8e03c2;
}
/* 舌色、舌形、苔色、苔质的每个类别的结论样式 */
.thisTezhengRes {
  line-height: 50px;
  /* 两端对齐 */
  text-align: justify;
  margin-bottom: 10px;
}
.ResText {
  color: #13c297;
  font-size: 30px;
}
.ResDetail {
  font-size: 28px;
}
/* 舌形 */
.shexingRange {
  padding: 20px 0;
  display: flex;
  /* width: 100vw; */
}
/* 是这种舌形 */
.isThisSX {
  width: 150px;
  height: 60px;
  background-color: #13c297;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 20px auto 0;
}
.isThisSX text {
  font-size: 28px;
  color: white;
}
/* 不是这种舌形 */
.notThisSX {
  width: 150px;
  height: 60px;
  border-radius: 60px;
  border: 1px solid #13c297;
  /* border-color: #13C297;
    border-width: 1px;
    border-style: solid; 实线*/
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 20px auto 0;
}
.notThisSX text {
  font-size: 28px;
  color: #13c297;
}

/* 苔色 */
.taiseRange {
  margin: 60px 0 20px 0;
  display: flex;
  justify-content: center;
}
.tsView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.tsView text {
  font-size: 26px;
  color: #989898;
  margin: 16px 0;
}
.taiseRange .qianbai {
  height: 10px;
  width: 100%;
  background-color: #eff3f4;
}
.taiseRange .shenbai {
  height: 10px;
  width: 100%;
  background-color: #c7cede;
}
.taiseRange .qianhuang {
  height: 10px;
  width: 100%;
  background-color: #a09e91;
}
.taiseRange .shenhuang {
  height: 10px;
  width: 100%;
  background-color: #968976;
}
/* 苔质 */
.taizhiRange {
  padding: 30px 0 20px 0;
  display: flex;
  width: max-content;
}
/* 是这种苔质 */
.isThisTZ {
  width: 100px;
  height: 50px;
  background-color: #13c297;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 10px auto 0;
}
.isThisTZ text {
  font-size: 28px;
  color: white;
}
/* 不是这种苔质 */
.notThisTZ {
  width: 100px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #13c297;
  /* border-color: #13C297;
    border-width: 1px;
    border-style: solid; 实线*/
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 10px auto 0;
}
.notThisTZ text {
  font-size: 28px;
  color: #13c297;
}

/* 标题 */
.title {
  display: flex;
  margin: 40px auto 0 40px;
  color: #ffffff;
  line-height: 60px;
}
.title1 {
  font-size: 32px;
  font-weight: bold;
}
.title2 {
  font-size: 28px;
}
/* 体质结果 */
.tizhiBJP {
  height: 180px;
  display: flex;

  margin: 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
/* 左侧保健品图像 */
.leftIcon {
  /* 垂直居中，左右间隔26px */
  /* margin: auto 26px; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px;
}
.Icon {
  width: 140px;
  height: 140px;
  /* 圆角 */
  border-radius: 50%;
}
/* 右侧体质结果及推荐 */
.rightRes {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  margin: auto 0;
  /* margin: 20px 20px; */
  /* margin-top:20px; */
  /* margin-bottom: 20px; */
  /* margin-left: 40px; */
}
.rightRes view {
  margin: auto 20px;
  line-height: 60px;
  font-size: 32px;
}

/* 体质柱形图 */
.tizhiBar {
  height: 240px;
  display: flex;
  justify-content: space-around;
  margin: 0 30px;
  color: white;
  /* font-size: 28px; */
}

.pinghe {
  width: 10%;
}
.phBar {
  height: 100%;
}
.qixu {
  width: 10%;
}
.qxBar {
  height: 100%;
}
.yangxu {
  width: 10%;
}
.yangxuBar {
  height: 100%;
}
.yinxu {
  width: 10%;
}
.yinxuBar {
  height: 100%;
}
.shire {
  width: 10%;
}
.shireBar {
  height: 100%;
}
.tanshi {
  width: 10%;
}
.tanshiBar {
  height: 100%;
}
.xueyu {
  width: 10%;
}
.xueyuBar {
  height: 100%;
}
.qiyu {
  width: 10%;
}
.qiyuBar {
  height: 100%;
}
.tebing {
  width: 10%;
}
.tebingBar {
  height: 100%;
}
.sanjiao {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 20px solid white;
  margin: 10px 0;
}

/* 调理方案 */
.tiaoli {
  height: max-content;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px;
  margin: 70px 20px 40px 20px;
}
/* 特征表现 */
.biaoxian {
  margin: 50px 40px;
  /* 行间距 */
  line-height: 50px;
  text-align: justify;
}
.bxTitle {
  font-size: 32px;
  font-weight: bold;
}
.bxDetail {
  font-size: 30px;
}
/* 分割线 */
.splitLine {
  height: 5px;
  border-top: 4px dashed #9b9b9b;
  margin-left: 40px;
  margin-right: 40px;
}
/* 体育锻炼 */
.yundong {
  margin: 50px 40px;
  line-height: 50px;
}
.yundongTitle {
  font-size: 32px;
  font-weight: bold;
}
.yundongDetail {
  font-size: 30px;
}
/* 经络图片 */
.jingluoImages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 20px;
}
.jingluoImages .jingluoImage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jingluoImage img {
  width: 400px;
  height: 400px;
}
.jingluoImage text {
  margin: 10px 0 30px 0;
  color: #707070;
  font-size: 28px;
}
/* 宜吃 */
.yichi {
  margin: 50px 40px;
  /* 行间距 */
  line-height: 50px;
}
.yichi .ycText {
  font-size: 32px;
  font-weight: bold;
  color: #13c297;
}
.yichi .ycDetail {
  font-size: 30px;
}
/* 宜吃图片 */
.ycImages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 36px;
}
.ycImages .ycImage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ycImage img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid #13c297;
}
.ycImage text {
  margin: 10px 0 30px 0;
  color: #707070;
  font-size: 28px;
}

/* 慎吃 */
.shenchi {
  margin: 50px 40px;
  /* 行间距 */
  line-height: 50px;
}
.shenchi .scText {
  font-size: 32px;
  font-weight: bold;
  color: red;
}
.shenchi .scDetail {
  font-size: 30px;
}

/* 慎吃图片 */
.scImages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 36px;
}
.scImages .scImage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scImage img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid red;
}
.scImage text {
  margin: 10px 0 30px 0;
  color: #707070;
  font-size: 28px;
}
/* 推荐膳食 */
.recommendFood {
  margin: 20px 40px 10px 40px;
  /* 行间距 */
  line-height: 50px;
}
.recommendFood .recText {
  font-size: 32px;
  font-weight: bold;
}
.recommendFood .recDetail {
  font-size: 30px;
}
.recImage {
  display: flex;
  flex-direction: row;
  height: min-content;
  margin: 20px 20px 50px 20px;
}
.recImage .recLeft {
  margin: auto 20px;
}
.recImage .recLeft .recIcon {
  width: 150px;
  height: 150px;
}
.recImage .recDescription {
  margin: auto 20px;
  font-size: 30px;
  line-height: 50px;
}

/* 横向滑动scroll-view隐藏滚动条 */
/* ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
} */
</style>
